<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.事件绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<button v-on:click="showTel">点我查看联系方式1</button>
			<button @click="showTel">点我查看联系方式2</button>
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					school:{
						name:'尚硅谷',
						address:'宏福科技园',
						tel:'010-56253825'
					}
				},
				methods:{
					// showTel何时调用？ —— 当有人点击【点我查看联系方式】按钮的时候
					// showTel中的this是谁？ —— vm
					// 通常来说，Vue所管理的函数，一定要写成普通函数，这样this才是vm，我们用着才方便。
					showTel(){
						console.log('@@',this)
						alert(this.school.tel)
					}
				}
			})
		</script>
	</body>
</html>